* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 14px;
}

// 定义全局颜色变量
:root {
  --bg-color: #f5f7fa;
  --text-color: #303133;
  --text-color-secondary: #606266;
  --text-color-placeholder: #909399;
  --border-color: #dcdfe6;
  --border-color-light: #e4e7ed;
  --border-color-lighter: #ebeef5;
  --border-color-extra-light: #f2f6fc;
  --fill-color: #f0f2f5;
  --fill-color-light: #f5f7fa;
  --fill-color-lighter: #fafafa;
  --fill-color-extra-light: #fafcff;
  --fill-color-blank: #ffffff;
  --box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: linear-gradient(180deg, #c1c1c1 0%, #a8a8a8 100%);
  --scrollbar-thumb-hover: linear-gradient(180deg, #a8a8a8 0%, #909090 100%);
  --scrollbar-thumb-active: linear-gradient(180deg, #909090 0%, #787878 100%);
}

// 深色模式变量
html.dark {
  --bg-color: #141414;
  --text-color: #e5eaf3;
  --text-color-secondary: #cfd3dc;
  --text-color-placeholder: #8d9095;
  --border-color: #4c4d4f;
  --border-color-light: #414243;
  --border-color-lighter: #363637;
  --border-color-extra-light: #2b2b2c;
  --fill-color: #2b2b2c;
  --fill-color-light: #262727;
  --fill-color-lighter: #1d1d1d;
  --fill-color-extra-light: #191919;
  --fill-color-blank: #141414;
  --box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.4);
  --scrollbar-track: #2b2b2c;
  --scrollbar-thumb: linear-gradient(180deg, #4c4d4f 0%, #363637 100%);
  --scrollbar-thumb-hover: linear-gradient(180deg, #565758 0%, #414243 100%);
  --scrollbar-thumb-active: linear-gradient(180deg, #606162 0%, #4c4d4f 100%);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app {
  height: 100vh;
  overflow: hidden;
  background: var(--bg-color);
  color: var(--text-color);
}

// 滚动条美化
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  transition: background 0.3s ease;
  
  &:hover {
    background: var(--scrollbar-thumb-hover);
  }
  
  &:active {
    background: var(--scrollbar-thumb-active);
  }
}

// Element Plus 组件样式覆盖
.el-card {
  border: none;
  box-shadow: var(--box-shadow);
  transition: all 0.3s ease;
  background: var(--fill-color-blank);

  &:hover {
    box-shadow: var(--box-shadow-light);
  }
}

// 根据菜单配色方案调整按钮主题色
// 默认使用淡雅配色（紫色主题）
:root {
  --el-color-primary: #6c7ae0;
  --el-color-primary-light-3: rgba(108, 122, 224, 0.7);
  --el-color-primary-light-5: rgba(108, 122, 224, 0.5);
  --el-color-primary-light-7: rgba(108, 122, 224, 0.3);
  --el-color-primary-light-8: rgba(108, 122, 224, 0.2);
  --el-color-primary-light-9: rgba(108, 122, 224, 0.1);
  --el-color-primary-dark-2: #5a6bc8;
}

// 淡雅菜单配色（紫色主题）
html.menu-light {
  --el-color-primary: #6c7ae0;
  --el-color-primary-light-3: rgba(108, 122, 224, 0.7);
  --el-color-primary-light-5: rgba(108, 122, 224, 0.5);
  --el-color-primary-light-7: rgba(108, 122, 224, 0.3);
  --el-color-primary-light-8: rgba(108, 122, 224, 0.2);
  --el-color-primary-light-9: rgba(108, 122, 224, 0.1);
  --el-color-primary-dark-2: #5a6bc8;
}

// 深色菜单配色（蓝色主题）
html.menu-dark {
  --el-color-primary: #5b9bd5;
  --el-color-primary-light-3: rgba(91, 155, 213, 0.7);
  --el-color-primary-light-5: rgba(91, 155, 213, 0.5);
  --el-color-primary-light-7: rgba(91, 155, 213, 0.3);
  --el-color-primary-light-8: rgba(91, 155, 213, 0.2);
  --el-color-primary-light-9: rgba(91, 155, 213, 0.1);
  --el-color-primary-dark-2: #4a8bc2;
}

.el-button {
  transition: all 0.3s ease;
  font-weight: 500;

  &:hover {
    transform: translateY(-2px);
  }

  // 根据菜单配色方案调整按钮悬停阴影
  html.menu-light & {
    &:hover {
      box-shadow: 0 4px 12px rgba(108, 122, 224, 0.3);
    }
  }

  html.menu-dark & {
    &:hover {
      box-shadow: 0 4px 12px rgba(91, 155, 213, 0.3);
    }
  }

  &:active {
    transform: translateY(0);
  }
}

.el-input {
  .el-input__wrapper {
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 0 0 1px var(--el-border-color) inset;
    }

    &.is-focus {
      box-shadow: 0 0 0 1px var(--el-color-primary) inset;
    }
  }
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from {
  transform: translateX(-100%);
}

.slide-leave-to {
  transform: translateX(100%);
}

// 工具类
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

// 深色菜单配色（与页面主题独立）
html.menu-dark {
  // 侧边栏容器样式（在layout/index.vue中）
  .sidebar-wrapper {
    background: linear-gradient(180deg, #1a1f2e 0%, #162132 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .first-level-menu {
    background: rgba(22, 33, 50, 0.6) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .second-level-menu {
    background: linear-gradient(180deg, #1a1f2e 0%, #162132 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

// 响应式工具类
@media (max-width: 768px) {
  html {
    font-size: 12px;
  }
}

